import React, {useState} from 'react';
import {Button, View} from "@tarojs/components";
import Taro from "@tarojs/taro"

import './NormalInteractivePage.scss'

function NormalInteractivePage() {

  const [btnLoading, setBtnLoading] = useState(false);

  function onClickHoverBtn() {

  }

  function onClickLoadBtn() {
    console.log("btn start loading");
    setBtnLoading(true);
    setTimeout(function () {
      console.log('btn end loading');
      setBtnLoading(false);
    }, 3000);
  }

  function onClickToastBtn() {
    Taro.showToast({
      title: '测试一下 toast 功能',
      icon: 'success',
      duration: 2000,
    });
  }
  function onClickModelBtn() {
    Taro.showModal({
      title:'model',
      content:'测试一下 model 的功能',
      confirmText:'操作01',
      confirmColor:'#abcd09',
      cancelText:'取消操作',
      cancelColor:'#ECECEC',
      success:function (res) {
        if (res.confirm) {
          console.log('用户点击了操作01');
        } else if (res.cancel) {
          console.log('用户点击了cancel操作');
        }
      },
    });
  }

  return (
    <View className={'index'}>
      <Button
        id={'button'}
        type={'primary'}
        hoverClass={'btn-hover'}
        onclick={() => onClickHoverBtn()}
      >
        test btn hover
      </Button>
      <Button
        type={'primary'}
        hoverClass={'btn-hover'}
        className={'btn-test-loading'}
        loading={btnLoading}
        onclick={() => onClickLoadBtn()}
      >
        load btn
      </Button>
      <Button
        id={'button'}
        className={'button-toast'}
        type={'primary'}
        onclick={() => onClickToastBtn()}
      >
        toast btn
      </Button>
      <Button
        id={'button'}
        className={'button-model'}
        type={'primary'}
        onclick={()=>onClickModelBtn()}
      >
        modal btn
      </Button>
    </View>
  );
}

export default NormalInteractivePage;
